<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>1014-商城活动倒计时</title>
		<style type="text/css">
			body{
				width: 1000px;
				margin:  50px auto 0;
				padding: 0 ;
			}
			.square{
				width: 180px;
				height: 150px;
				line-height: 150px;
				text-align: center;
				border: 2px solid lightcoral;
				background: lawngreen;
				float: left;
			}
		</style>
	</head>
	<body>
		
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		
		
		
		<script type="text/javascript">
			var square= document.getElementsByClassName("square");  
			var timego = new Date("2021 5-11 18:00:00");
			
			//setInterval()被用来处理延时和定时任务
			//setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
			var countTimes = setInterval(function(){
				var localTime = new Date(); //获取当前时间
				var times = timego - localTime; //times总毫秒数
				//对应关系
				var hao =(times%1000); //总毫秒数和1000取余，为当前剩余毫秒数
				var sec = parseInt(times/1000);  //计算出总秒数
				var sescth = (sec%60);    //秒数和60取余，为当前剩余秒数
				var min = parseInt((sec/60))%60;
				
				//分钟数为取余过后的秒数取余，消除之前的影响
				var hour = parseInt((sec/3600))%24;
				var days = parseInt((sec/86400))%365;
				square[0].innerHTML = days + "天";
				square[1].innerHTML = hour + "时";
				square[2].innerHTML = min + "分";
				square[3].innerHTML = sescth + "秒";
				
				//分别给每个块的内容赋值
				//注意毫秒处bug  0~9需加"00"   10~99需加"0"
				
				var res = "";
				if(hao<10){
					res = "00"+hao;
				}else if (hao >= 10&&hao<100){
					res = "0"+hao;
				}else{
					res =hao;
				}
				square[4].innerHTML = res + "毫秒";
			},1)
		</script>
	</body>
</html>
